import React from "react";
import { Select } from 'antd';
const { Option } = Select;

import {bookTypeInfoFull} from "../../data/bookType";
let {bookTypeL1,bookTypeL2} = bookTypeInfoFull;

const SelectGroup = (props) => {
    const [btyL1, setBtyL1] = React.useState(bookTypeL2[bookTypeL1[0]]);
    const [btyL2, setBtyL2] = React.useState(bookTypeL2[bookTypeL1[0]][0]);

    let btyL1Value = bookTypeL1[0];
    let btyL2Value = bookTypeL2[0];
  
    const handleBtyL1Change = value => {
        setBtyL1(bookTypeL2[value]);
        setBtyL2(bookTypeL2[value][0]);
        props.setValue(0,value);
    };
  
    const onBtyL2Change = value => {
        setBtyL2(value);
        btyL2Value = value;
        props.setValue(1,value);
    };
  
    return (
      <>
        <Select defaultValue={bookTypeL1[0]} style={{ width: 100 }} onChange={handleBtyL1Change}>
          {bookTypeL1.map(btyL1Item => (
            <Option key={btyL1Item}>{btyL1Item}</Option>
          ))}
        </Select>
        <Select style={{ width: 100 }} value={btyL2} onChange={onBtyL2Change}>
          {btyL1.map(btyL2Item => (
            <Option key={btyL2Item}>{btyL2Item}</Option>
          ))}
        </Select>
      </>
    );
  };

  export default SelectGroup;
